<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>

 
<style type="text/css">
<!--
.loginbgcolor {
    background-color: #3B3E40;
}

.bgdiv {
    background-color: rgba(255,255,255,0.6);
    height: 292px;
    width: 428px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.loginform {
    margin: -200px 97px 71px 97px;
    height: 150px;
    width: 300px;
    
}

.loginform .error{
    margin: 5px 0px 0px 0px;
    font-family: "";
    font-size: 14px;
    color: #FF0000;
}

input[type="text"], input[type="email"], input[type="search"], input[type="password"], input[type="code"], textarea {
-webkit-appearance: none;
background: #fff;
border: 1px solid #323537;
}

input, textarea {
fong-family:"宋体";
padding: 10px;
font-size: 12px;
font-family: Arial;
color: #606060;
border: 1px solid #e3e3e3;
background: #fff;
width: 100%;
margin: 0 0 15px 0;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

input:focus{
    outline: none;
}

.button {
color: #fff;
text-shadow: none;
border: 1px solid #0f70ad;
width: 100%;
margin: 0;

font-size:13px;
fong-family:"宋体";

background: #208ed3;
background: -moz-linear-gradient(top, #208ed3 0%, #0272bd 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#208ed3), color-stop(100%,#0272bd));
background: -webkit-linear-gradient(top, #208ed3 0%,#0272bd 100%);
background: -o-linear-gradient(top, #208ed3 0%,#0272bd 100%);
background: -ms-linear-gradient(top, #208ed3 0%,#0272bd 100%);
background: linear-gradient(to bottom, #208ed3 0%,#0272bd 100%);
}

 
.button:hover {
    color: #3B3E40;
    text-shadow: none;
    background: #ededee ;
    background: -moz-linear-gradient(top, #ededee 0%, #dddddd 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededee), color-stop(100%,#dddddd)) !important;
    background: -webkit-linear-gradient(top, #ededee 0%,#dddddd 100%) !important;
    background: -o-linear-gradient(top, #ededee 0%,#dddddd 100%) !important;
    background: -ms-linear-gradient(top, #ededee 0%,#dddddd 100%) !important;
    background: linear-gradient(to bottom, #ededee 0%,#dddddd 100%) !important;
}

.loading {
    background: #9bc747 !important;
    border: 1px solid #323537;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none; 
    -webkit-transition: width .4s ease-in-out;
    -moz-transition: width .4s ease-in-out;
    -ms-transition: width .4s ease-in-out;
    -o-transition: width .4s ease-in-out;
    transition: width .4s ease-in-out;
    -webkit-background-size: 30px 30px;
    -moz-background-size: 30px 30px;
    background-size: 30px 30px;
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    -webkit-animation: animate-stripes 3s linear infinite;
    -moz-animation: animate-stripes 3s linear infinite;
}

.loginfooter {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    position: relative;
    bottom: 0px;

    text-align:center;
    color: #959595;
    
    padding:0 0 20px 0;
}

.loginform h1 {
color: #fff;
font-family: '宋体', sans-serif;
font-size: 28px;
margin-bottom: 15px;
letter-spacing: -1px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.loginform .code{
width:160px;
float:left;
}
.loginform img{
width:100px;
float:right;
}
-->
</style>

<script type="text/javascript" src="${ctx}/js/jquery.min.js"></script>
<script type="text/javascript" src="${ctx}/js/common.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>流量超市后台管理系统</title>
</head>
<body class="loginbgcolor">

<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="middle">
        <div class="loginform">
            <h1>流量超市后台管理系统</h1>
            <form method="post" id="loginForm">
                 <input type="text" name="username"    id="username" class="username" autofocus="true" placeholder="用户帐号" required="true">
                 <input type="password" name="password" id="password" class="password" placeholder="用户密码" required="true">
                 <input type="code" name="code" id="code" class="code" placeholder="验证码" required="true"><img onclick="refreshCode(this);" title="点击刷新图片校验码" alt="点击刷新图片校验码" src="${ctx}/ht/loginCode">
                 <input id="loginBtn" type="button" class="button" value="登  陆">
            </form>
            <div class="error" id="errorMsg">
           
            </div>
        </div>

    </td>
  </tr>
</table>

<script type="text/javascript">
$(function() {
	$('#loginBtn').on('click',function(){
		var username = $('#username').val();
        var password = $('#password').val();
        var code = $('#code').val();
        if(username.length == 0){
        	$('#errorMsg').html('请填写用户账号');
        	$('#username').focus().select();
        	return;
        }
        if(password.length == 0){
            $('#errorMsg').html('请填写用户密码');
            $('#password').focus().select();
            return;
        }
        if(code.length == 0){
            $('#errorMsg').html('请填写用验证码');
            $('#code').focus().select();
            return;
        }
        $('#loginBtn').addClass('loading');
        $.ajax({ 
            url: '${ctx}/ht/doLogin',
            type: 'POST',
            data: $('#loginForm').serializeObject(),
            cache:false,
            dataType:'json',  
            success: function(data){  
                if(data.success){ 
                	$('#loginBtn').removeClass('loading');
                    window.location.href='${ctx}/ht/agentUserApprove'; 
                }else{
                    $('#loginBtn').removeClass('loading');
                	 $('#errorMsg').html(data.msg); 
                }
            },
            error : function(data) {    
                console.info(data);
            }    
        });
	});
});
function refreshCode(obj){  
    obj.src="${ctx}/ht/loginCode?rnd="+Math.random();
}
</script>
</body>
</html>
